<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        /* overflow: hidden; */
    }

    body {
        position: relative;
        min-height:120px;
    }

    .header {
        position: relative;
        width: 100%;
        padding: 20px 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*第一个子元素紧贴容器起点（最左/最上），最后一个子元素紧贴容器终点（最右/最下）。*/
    }

    .logo {
        width: 200px;
        height: 50px;
    }

    .slogan {
        position: absolute;
        left: 330px;
        top: 23px;
        width: 169px;
        height: 45px;
    }

    .header-1 {
        display: flex;
        gap: 20px;
        /*定义子元素之间的间隔*/
    }

    .header-1 p {
        font-size: 16px;
        color: #999999;
    }

    .background {
        position: relative;
        width: 100%;
        min-height: calc(100vh - 278px);
        /* height: ;视口高度 */
        overflow: hidden;
    }

    .login-bg {
        width: 100%;
        height: 605px;
        object-fit: cover;
        /*缩放以完全覆盖容器*/
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .login-logo-image {
        position: absolute;
        width: 350px;
        height: 380px;
        right: 1100px;
        top: 300px;
        transform: translateY(-50%);
        z-index: 2;
    }

    .login-logo-txt {
        position: absolute;
        width: 340px;
        height: 110px;
        left: 630px;
        top: 285px;
        transform: translateY(-50%);
        z-index: 2;
    }

    .login {
        position: absolute;
        top: 250px;
        left: 1200px;
        transform: translate(-50%, -50%);
        width: 400px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        z-index: 3;
    }

    .error {
        color: red;
        font-size: 14px;
        margin-top: 5px;
    }

    .login h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }

    .form-group input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

    .login-button {
        width: 100%;
        padding: 12px;
        background-color: #4285f4;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .login-button:hover {
        background-color: #3367d6;
    }

    .register-link {
        text-align: center;
        margin-top: 15px;
    }

    .register-link a {
        color: #4CAF50;
        text-decoration: none;
    }

    .register-link a:hover {
        text-decoration: underline;
    }

    .footer {
        text-align: center;
        /* padding: 110px; */
        font-size: 15px;
        color: #999;
        background-color: #f5f5f5;
    }

    .footer-1 {
        padding-top: 30px;
        margin-bottom: 25px;
    }

    .footer-1 a {
        margin: 0 15px;
        color: #666;
        text-decoration: none;
    }

    .footer-2 {
        line-height: 24px;
        color: var(--theme-global-font-fourth-color, #bbb);
        font-size: 12px;
    }

    .footer-img1 {
        width: 120px;
        height: 50px;
        margin: 0 10px;
        margin-top: 20px;
    }

    .footer-img2 {
        width: 120px;
        height: 50px;
        margin: 0 10px;
    }

    .footer-img3 {
        width: 120px;
        height: 50px;
        margin: 0 10px;
    }

    .footer-img4 {
        width: 120px;
        height: 50px;
        margin: 0 10x;
    }

    .footer-img5 {
        width: 120px;
        height: 50px;
        margin: 0 10px;
    }

    .footer-img6 {
        width: 120px;
        height: 50px;
        margin: 0 10px;
    }
</style>
<script src="js/jquery.3.7.1min.js"></script>
</head>

<body>
    <header class="header">
        <img src="img/login/logo.d026f02.png" class="logo" alt="">
        <img src="img/login/slogan.5aedff4.png" class="slogan" alt="">
        <div class="header-1">
        	
             <a href="index.html"><p>返回首页</p></a>
             <a href="writer/login-writer.html"><p>登录/注册作家账号</p></a>
        </div>
    </header>

    <div class="background">
        <img src="img/login/login-bg.cdce65ac.png" class="login-bg" alt="">
        <img src="img/login/login-logo-image.2e01486e.png" class="login-logo-image" alt="">
        <img src="img/login/login-logo-txt.e83a3e70.png" class="login-logo-txt" alt="">

        <div class="login">
            <h2>用户登录</h2>
            <form id="loginForm" action="/qimao/login" method="POST">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                    <div id="usernameError" class="error"></div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                    <div id="passwordError" class="error"></div>
                </div>
                <button type="submit" class="login-button">登录</button>
                <div class="register-link">
                    还没有账号? <a href="register.html">立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <div class="footer">
        <div class="footer-1">
            <a href="#">七猫中文网</a>|
            <a href="#">奇妙小说网</a>|
            <a href="#">纵横中文网</a>|
            <a href="#">帮助中心</a>|
            <a href="#">问题反馈</a>|
            <a href="#">举报工作室</a>|
        </div>
        <div class="footer-2">
            上海七猫文化传媒有限公司 © 2017 www.gmso.com All rights reserved. 沪ICP备17012025号© IP:公网安备31011620010023号<br>
            出版物经营许可证 浙商证字第77739号 沪深交[2023] 1686-1065 沪ICP证：沪B2-20-108085
        </div>
        <img src="img/login/1.5dc41de8.png" class="footer-img1" alt="">
        <img src="img/login/2.7ac78a2a.png" class="footer-img2" alt="">
        <img src="img/login/3.665a3781.png" class="footer-img3" alt="">
        <img src="img/login/4.136748fb.png" class="footer-img4" alt="">
        <img src="img/login/5.db8ce747.png" class="footer-img5" alt="">
        <img src="img/login/6.a1cc2a3c.png" class="footer-img6" alt="">
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            let isValid = true;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            document.getElementById('usernameError').textContent = '';
            document.getElementById('passwordError').textContent = '';

            // 用户名验证
            if (username.length < 4) {
                document.getElementById('usernameError').textContent = '用户名至少4个字符';
                isValid = false;
            }

            // 密码验证
            if (password.length < 6) {
                document.getElementById('passwordError').textContent = '密码至少6个字符';
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
            }
        });
        
     // console.log(username+"_________"+password);
        document.addEventListener('DOMContentLoaded', function() {
            const cookies = document.cookie.split(';');
            let username = '', password = '';
            
            cookies.forEach(cookie => {
                const [name, value] = cookie.trim().split('=');
                if (name === 'uname') {
                    username = decodeURIComponent(value);
                }
                if (name === 'upwd') {
                    password = decodeURIComponent(value);
                }
            });
            
            if (username) {
                document.getElementById('username').value = username;
            }
            if (password) {
                document.getElementById('password').value = password;
            }
        });

        // 表单提交
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            login();
        });

        // 登录
        function login() {
            // 验证输入
            if (!username) {
                showError('请输入用户名');
                return;
            }
            
            if (!password) {
                showError('请输入密码');
                return;
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/checkSession')
                .then(response => response.json())
                .then(data => {
                    if (data.loggedIn) {
                        window.location.href = 'index.html'; 
                    }
                });
        });
        /*     function loginMsg(){
            	$.ajax({
            		type:"POST",
            		url:"login",
            		success:function(data){
            				fetch('login')
            					.then(response =>response.json())
            					.then(data =>{
            						console.log(data.msg);
            					})
            		}
            	})
            } */
    </script>
</body>
</html>